import "./style.scss";
import Logo from "@/assets/photos/network/turingbot.png";
import React, { useEffect, useState } from "react";
import { Button, Drawer, Select } from "antd";
import DrawerContent from "@/pages_PC/Home/DrawerContent";
import { useTranslation, Trans } from "react-i18next";
import { useNavigate } from "react-router-dom";

import caidan from '@/assets/icons/caidan.png'

const MyHeader = () => {
  const [language, setLanguage] = useState("zh");
  useEffect(() => {
    // localStorage.getItem("language") || 
    const defaultLanguage = "zh";
    i18n.changeLanguage(defaultLanguage);
    console.log(defaultLanguage);
    setLanguage(defaultLanguage);

  }, []);
  const lngs = [
    { nativeName: "English", short: "en" },
    { nativeName: "中文", short: "zh" }
  ];
  const { t, i18n } = useTranslation();
  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    console.log("----");
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  const navigate = useNavigate();
  const gotoDashboard = () => {
    const token = localStorage.getItem('token')
    token ? navigate("/dashboardPC/home") : navigate('/login') ;
   
    const trade = document.querySelector(".tradingview-widget-container");
    console.log(trade);
    trade.style.display = "none";
  };
  return (
    <div className="header-container-pc">
      <img src={Logo} alt="" className="left" />
      <div className="right show-all-menu">
        <Button type="text" className="menu-item">{t("homeText")}</Button>
        <Button type="text" className="menu-item">{t("FollowCase")}</Button>
        <Button type="text" className="menu-item">NFT</Button>
        <Button type="text" className="menu-item">DAO</Button>
        <Button type="text" className="menu-item">{t("Consult")}</Button>
        <Button type="text" className="menu-item">FQ</Button>
        <Select
          style={{ width: "100px" }}
          popupMatchSelectWidth={false}
          // defaultValue={language}
          value={language}
          onChange={(value) => {
            localStorage.setItem("language", value);
            i18n.changeLanguage(value);
            setLanguage(value);
          }}>
          {lngs.map((item, index) => {
            return <Select.Option key={item.short} value={item.short} label="123">{item.nativeName}</Select.Option>;
          })}
        </Select>
        <Button className="menu-item special-button" onClick={gotoDashboard}>{t("Dashboard")}</Button>
      </div>
    </div>
  );
};
export default MyHeader;
